<template>
  <div>
    <div class="container">
      <div class="title">导航栏模式</div>
      <div class="flex">
        <div class="tc" style="padding: 0 15px" @click="is_top_menu(1)">
          <svgBtn
            icon="page_style_1"
            style="
              font-size: 54px;
              width: 54px;
              height: 54px;
              line-height: 48px;
              border-radius: 2px;
              margin: 10px auto;
            "
            :class="!top_menu ? 'border' : ''"
          ></svgBtn>
          <p style="font-size: 12px; color: #666">左侧菜单模式</p>
        </div>
        <div class="tc" style="padding: 0 15px" @click="is_top_menu(2)">
          <svgBtn
            icon="page_style_2"
            style="
              font-size: 54px;
              width: 54px;
              height: 54px;
              line-height: 48px;
              border-radius: 2px;
              margin: 10px auto;
            "
            :class="top_menu ? 'border' : ''"
          ></svgBtn>
          <p style="font-size: 12px; color: #666">顶部菜单模式</p>
        </div>
      </div>
      <div class="title">界面功能</div>
      <div>
        <div class="flex_js" style="padding: 0 20px">
          <div>折叠菜单</div>
          <el-switch
            inline-prompt
            size="large"
            active-text="是"
            inactive-text="否"
            active-color="#3580EB"
            inactive-color="#ABACAE"
            v-model="show_menu"
            @change="change_setup(1)"
          ></el-switch>
        </div>
        <div class="flex_js" style="padding: 0 20px">
          <div>菜单搜素</div>
          <el-switch
            inline-prompt
            size="large"
            active-text="是"
            inactive-text="否"
            active-color="#3580EB"
            inactive-color="#ABACAE"
            v-model="search_menu"
            @change="change_setup(2)"
          ></el-switch>
        </div>
        <div class="flex_js" style="padding: 0 20px">
          <div>面包屑</div>
          <el-switch
            inline-prompt
            size="large"
            active-text="是"
            inactive-text="否"
            active-color="#3580EB"
            inactive-color="#ABACAE"
            v-model="crumbs"
            @change="change_setup(3)"
          ></el-switch>
        </div>
        <div class="flex_js" style="padding: 0 20px">
          <div>标签页</div>
          <el-switch
            inline-prompt
            size="large"
            active-text="是"
            inactive-text="否"
            active-color="#3580EB"
            inactive-color="#ABACAE"
            v-model="show_tabs"
            @change="change_setup(4)"
          ></el-switch>
        </div>
        <div class="flex_js" style="padding: 0 20px">
          <div>内容全屏</div>
          <el-switch
            inline-prompt
            size="large"
            active-text="是"
            inactive-text="否"
            active-color="#3580EB"
            inactive-color="#ABACAE"
            v-model="is_all_page"
            @change="change_setup(5)"
          ></el-switch>
        </div>
      </div>
    </div>
    <el-divider style="margin: 15px 0"></el-divider>
    <div class="tr">
      <el-button @click="reset">重置</el-button>
      <el-button type="primary" @click="$emit('close')">确定</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import svgBtn from '@/components/svg_button.vue'
import { useStore } from 'vuex'
import EventBus from '@/utils/EventBus'
import { ref, computed } from 'vue'
const store = useStore()
const top_menu = computed(() => {
  return store.state.is_top_menu
})
const show_menu = computed(() => {
  return store.state.isCollapse
})
const search_menu = ref(false)
const crumbs = ref(true)
const show_tabs = computed(() => {
  return store.state.hidden_tabs
})
const is_all_page = computed(() => {
  return store.state.is_all_page
})
const is_top_menu = (e) => {
  if ((e == 1 && !top_menu.value) || (e == 2 && top_menu.value)) {
    return
  }
  store.commit('change_top_menu')
}
const change_setup = (e) => {
  if (e == 1) {
    store.commit('change_isCollapse')
  } else if (e == 2) {
    EventBus.emit('search_menu', search_menu.value)
  } else if (e == 3) {
    EventBus.emit('show_crumbs', crumbs.value)
  } else if (e == 4) {
    EventBus.emit('show_tabs', show_tabs.value)
    store.commit('change_hidden_tabs')
  } else if (e == 5) {
    store.commit('change_all_page')
  }
}
const reset = () => {
  store.commit('change_top_menu', 1)
  store.commit('change_hidden_tabs', 1)
  EventBus.emit('search_menu', false)
  EventBus.emit('show_crumbs', true)
  EventBus.emit('menu_show_mainshow', false)
}
</script>

<style lang="scss" scoped>
.border {
  border: 2px solid #3580eb;
}
.el-switch {
  --el-switch-button-size: 18px;
}
:deep(.el-switch__action) {
  top: 5px;
  left: 5px;
}
:deep(.el-switch__inner) {
  top: 5px;
  left: 55%;
  font-size: 12px;
  color: #fff;
}
:deep(.el-switch__core) {
  width: 54px !important;
  border-radius: 14px;
  height: 28px;
  background: #b1b4bc !important;
  border: #b1b4bc !important;
  &:after {
    width: 18px;
    height: 18px;
    background: #78849f;
    top: -5px;
    left: -1px;
  }
}
:deep(.el-switch.is-checked .el-switch__core) {
  background-color: #3580eb !important;
  &:after {
    width: 18px;
    height: 18px;
    background-color: #3580eb !important;
    top: -5px;
    left: 44px;
  }
  .el-switch__action {
    margin-left: calc(-5px - 18px);
  }
}
.title {
  border-left: 4px solid #3580eb;
  padding-left: 6px;
  height: 14px;
  line-height: 14px;
  margin: 30px 0 10px 0;
  font-weight: bold;
}
</style>
